<template>
	<view class="content">
		<view class="form">
			<view class="item">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					小时数
				</view>
				<view class="ipt">
					<input type="number" placeholder="请输入小时数" v-model="info.module_minute">
				</view>
			</view>
			<view class="item">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					收款户名
				</view>
				<view class="ipt">
					<input type="text" placeholder="请输入收款户名" v-model="info.collection_name">
				</view>
			</view>
			<view class="item">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					收款账号
				</view>
				<view class="ipt">
					<input type="text" placeholder="请输入收款账号" v-model="info.collection_account">
				</view>
			</view>
			<view class="item">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					收款金额
				</view>
				<view class="ipt">
					<input type="text" placeholder="请输入收款金额" v-model="info.collection_money">
				</view>
			</view>
			<view class="item" @tap="collection_time_show = true">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					收款日期
				</view>
				<view class="ipt">
					{{collection_time}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					<image class="starImg" src="../../static/img/star.png" mode=""></image>
					收款渠道
				</view>
				<view class="ipt" @tap="collectionFormShow = true">
					<view class="text">
						{{collectionFormText}}
					</view>
					<image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
				</view>
			</view>
			<view class="img-item">
				<view class="img-label">
					<view class="img-starImg"></view>
					收款图片
				</view>
				<view class="iptImg" @tap="chooseAndUploadImage()">
					<image class="defaultImg" src="../../static/img/add.png" v-if="info.collection_img == ''"></image>
					<image class="authenticationImg" :src="info.collection_img" v-else></image>
				</view>
			</view>
		</view>
		<view class="btn" @tap="addRecharge()">
			确认提交
		</view>
		
		<u-datetime-picker :show="collection_time_show" v-model="info.collection_time" mode="date" @confirm="confirm_collection_time"
			@cancel="cancel_collection_time"></u-datetime-picker>
		<!-- 级别下拉框 -->
		<u-picker :show="collectionFormShow" :columns="collectionFormColumns" keyName="label" @confirm="confirmCollectionForm"
			@cancel="collectionFormShow = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					school_id: '',
					module_minute: '',
					collection_name: '',
					collection_account: '',
					collection_money: '',
					collection_time: Number(new Date()),
					collection_form: '',
					collection_img: ''
				},
				collection_time_show: false,
				collection_time: "请选择收款日期",
				collectionFormShow: false,
				collectionFormColumns: [
					[{
						label: '微信',
						id: 1
					}, {
						label: '支付宝',
						id: 2
					}, {
						label: '银行账户',
						id: 3
					}, {
						label: '其他',
						id: 4
					}],
				],
				collectionFormText: "请选择收款渠道",
			};
		},
		onLoad(option) {
			this.info.school_id = option.school_id
		},
		methods: {
			confirm_collection_time(e) {
				var time = this.timestampToDate(e.value);
				this.info.collection_time = time
				this.collection_time = time
				this.collection_time_show = false
			},
			cancel_collection_time() {
				this.collection_time_show = false
			},
			timestampToDate(timestamp) {
				var date = new Date(timestamp); // 如果timestamp是数值，则直接使用，否则需要转换
				var year = date.getFullYear();
				var month = (date.getMonth() + 1).toString().padStart(2, '0');
				var day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			confirmCollectionForm(e) {
				this.collectionFormText = e.value[0].label
				this.info.collection_form = e.value[0].id
				this.collectionFormShow = false
			},
		
			async addRecharge() {
				if (this.collection_time != '请选择加盟时间'){
					this.info.collection_time = this.collection_time
				}else{
					this.info.collection_time = '';
				}
				const {
					data: res
				} = await uni.$http.post('school/school/rechargeSchool', this.info)
				if (res.code != 1) {
					return this.toast.msg(res.msg)
				}
				this.toast.msg('充值成功')
				setTimeout(() => {
					uni.navigateTo({
						url: '../school/index'
					})
				}, 1000)
			},
			chooseAndUploadImage(info_name) {
				// 选择图片
				uni.chooseImage({
					count: 1, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						uni.showLoading();
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://haici.snooowball.cn/api/user/uploadImg', // 服务器上传接口地址
							filePath: tempFilePaths[0],
							header: {
								'token': uni.getStorageSync('app_token')
							},
							name: 'file', // 必须填写，后台用来接收文件
							formData: {
								file: tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								var array = JSON.parse(uploadFileRes.data)
								this.info.collection_img = array.data.url
								uni.hideLoading();
							},
							fail: (uploadFileErr) => {
								uni.hideLoading();
								console.error('图片上传失败', uploadFileErr);
								return this.toast.msg('图片上传失败')
							}
						});
						// 监听上传进度变化
						uploadTask.onProgressUpdate((res) => {
							uni.hideLoading();
							console.log('上传进度' + res.progress + '%');
						});
					},
					fail: (chooseImageErr) => {
						console.error('选择图片失败', chooseImageErr);
						return this.toast.msg('选择图片失败')
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;

		.form {
			width: 652rpx;
			margin: 40rpx auto;
			padding-bottom: 100rpx;

			.item {
				display: flex;
				align-items: center;
				padding: 0 35rpx 0 19rpx;
				margin-bottom: 30rpx;
				width: 652rpx;
				height: 78rpx;
				line-height: 78rpx;
				border-radius: 10rpx;
				border: 2rpx solid #FCF7F7;

				.label {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					margin-right: 70rpx;
					width: 160rpx;

					.starImg {
						width: 14rpx;
						height: 42rpx;
						margin-right: 15rpx;
					}
				}

				.ipt {
					flex: 1;
					position: relative;
					display: flex;
					align-items: center;
					color: #666;

					.lowerImg {
						position: absolute;
						right: 0;
						width: 20rpx;
						height: 11rpx;
					}
				}

				.time {
					color: #666;
					display: flex;
					align-items: center;

					.timeImg {
						width: 35rpx;
						height: 35rpx;
						margin-right: 17rpx;

					}
				}
			}

			.textBox {
				padding: 0 35rpx 0 19rpx;
				display: flex;
				border: 2rpx solid #FCF7F7;

				.label {
					height: 70rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					margin-right: 70rpx;
					width: 160rpx;

					.starImg {
						width: 14rpx;
						height: 42rpx;
						margin-right: 15rpx;
					}
				}

				.ipt {
					flex: 1;
					height: 352rpx;

					.u-textarea {
						height: 352rpx;
						border: none;
						padding-left: 0;

						/deep/.u-textarea__field {
							height: 352rpx !important;
						}

						.uni-textarea-textarea {
							height: 352rpx;
						}
					}
				}
			}
		}
		
		.img-item {
			padding: 0 5% 0 5%;
			margin-bottom: 30rpx;
			width: 100%;
			height: 220rpx;
		
			.img-label {
				font-size: 28rpx;
				width: 220rpx;
				float: left;
		
				.img-starImg {
					width: 14rpx;
					height: 42rpx;
					margin-right: 15rpx;
				}
			}
		
			.iptImg {
				float: left;
				border-radius: 6px;
				border: 1px solid #ECECEC;
				position: relative;
				width: 206.78rpx;
				height: 206.78rpx;
				border: 1.75rpx solid #ECECEC;
		
				.defaultImg {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 28rpx;
					height: 28rpx;
				}
		
				.authenticationImg {
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 6px;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 652rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			background: #CCCCCC;
			border: 2rpx solid #69A1E0;
		}
	}
</style>